<template>
    <div class="rate-content">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="currencyName"
          label="币种">
        </el-table-column>
        <el-table-column
          prop="rateValue"
          label="人民币汇率">
        </el-table-column>
        <el-table-column
          prop="editTime"
          label="修改时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openDialog(scope.row.id, scope.row.rateValue, scope.row.currencyName)" :disabled="scope.row.currencyName == '人民币'">操作</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="operation">
        <h3>操作日志</h3>
        <avue-timeline pending time :time-width="100" class="timeline">
          <avue-timeline-item icon="el-icon-tickets" v-for="(item,index) in operationList" :key="index" :icon="item.icon">
            <div slot="time">{{item.editTime}}</div>
            <div slot="content" style="width: 100%;line-height: 27px">
              <p class="mail_content">{{item.operContent}}</p>
            </div>
          </avue-timeline-item>
        </avue-timeline>

        <el-pagination
          v-if="total > 0"
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="5"
          :current-page.sync="nowPage"
          :total="total">
        </el-pagination>
      </div>

      <el-dialog
        :visible.sync="dialogVisible"
        width="450px"
        center
        :before-close="handleClose">
        <span slot="title" class="dialog-title">编辑汇率</span>
        <div class="form">
          <span style="font-size: 13px">{{currency}}汇率：</span>
          <el-input v-model="rateMessage" style="width: 240px" size="small"></el-input>
        </div>

        <span class="rote">注：所有汇率都对应人民币，汇率的更改会影响订单金额的换算</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button type="primary" @click="edit" :loading="loading" size="small">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import {getRateList, editRate, getOperationList} from '@/api/system/rate'
    export default {
        name: "rate",
        data() {
            return {
                tableData: [],
                operationList:[],
                dialogVisible:false,
                currency:'人民币',
                rateMessage: 0,
                rateId:'',
                nowPage:1,
                total: 0,
                loading:false
            }
        },
        mounted() {
            this.getRateList()
            this.getOperationList()
        },
        methods:{
            getRateList() {
                getRateList().then(res => {
                    this.tableData = res.data.data
                })
            },
            getOperationList() {
                getOperationList(this.nowPage, 5).then(res=> {
                    this.operationList = res.data.data.records
                    this.total = res.data.data.total
                })
            },
            openDialog(id, rate, currency) {
                this.rateId = id
                this.rateMessage = rate
                this.currency = currency
                this.dialogVisible = true
            },
            edit() {
                if(this.rateMessage != '') {
                    this.loading = true
                    editRate(this.rateId, this.rateMessage).then(res =>{
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                        this.loading = false
                        this.dialogVisible = false
                        this.rateId = ''
                        this.rateMessage = 0
                        this.currency = '人民币'
                        this.nowPage = 1
                        this.getRateList()
                        this.getOperationList()
                    }).catch(() => {
                        this.loading = false
                    })
                }
            },
            handleClose() {
                this.dialogVisible = false
                this.rateId = ''
                this.rateMessage = 0
                this.currency = '人民币'
            },
            handleCurrentChange(page) {
                this.nowPage = page
                this.getOperationList()
            }
        }
    }
</script>

<style scoped lang="scss">
  .rate-content{
    padding: 32px 29px;
  .rote{
    color: #8C8C8C;
    text-align: center;
    font-size: 13px;
    margin-left: 25px;
  }
  .form{
    text-align: center;
    padding: 10px 20px;
  }
    .operation{
      margin-top: 20px;
      font-size: 13px;
      h3{
        color:#2A97F9;
        font-size: 14px;
        font-weight: 600;
      }
      .timeline{
        margin-top: 10px !important;
      }
    }
  }
</style>
